/*
 * @Title: 官方攻略组件
 * @Created by: gsjPC 
 */
<template>
	<view>
		<view class="glTitle">
			<view><text>{{glTitle}}</text></view>
			<view class="glMore" @tap="goMore">更多<uni-icon type="arrowright" size="20" color="#999"></uni-icon></view>
		</view>
		<scroll-view class="glPicBox" scroll-x="true">
			<view 
			v-for="(picView,index) in picViewLists" 
			:key="index" 
			class="picViewLists"
			@tap="goGlDetails">
					<image :src="picView.pic"></image>
					<view class="absoteTitle"><text>{{picView.title}}</text></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		components:{
			uniIcon
		},
		props:{
			glTitle:String,
			picViewLists:{
				type:Array,
				default:function(){
					return {
						pic:'展示图片',
						title:'展示标题'
					}
				}
			},
			goGlDetails:{
				type:Function,
				default:function(){
						uni.navigateTo({
							url:''
						})
				}
			},
			goMore:{
				type:Function,
				default:function(){
					uni.navigateTo({
						url:''
					})
				}
			}
			
		},
		
	}
</script>

<style>
	.glTitle{
		margin:0 10upx 0 28upx;
		height: 90upx;
		line-height: 90upx;
		display:flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.glTitle text{
		font-size: 28upx;
		color: #010101;
	}
	.glTitle text:before{
		content:'';
		display: inline-block;
		background-color: #54B1FF;
		height: 23upx;
		width:5upx;
		margin-right:12upx;
	}
	.glMore{
		color: #999999;
		font-size:26upx;
		display: flex;
		align-items: center;
	}
	.glMore .uni-icon{
		margin-top:8upx;
	}
	.glPicBox{
		white-space: nowrap;
		width: 100%;
		height:209upx;
		border-bottom: 15upx solid #F6F6F6;
		padding-bottom: 28upx;
	}
	.glPicBox:last-child{
		border-bottom: none;
	}
	.picViewLists{
		margin-right: 24upx;
		height:209upx;
		display: inline-block !important;
		position: relative;
	}
	.picViewLists:first-child{
		margin-left: 28upx;
	}
	.picViewLists image{
		width:277upx;
		height:209upx;
		background-color: #ddd;
		border-radius: 10upx;
	}
	.absoteTitle{
		background-color: rgba(0,0,0,0.6);
		height: 40upx;
		line-height: 40upx;
		border-top-left-radius: 20upx;
		border-bottom-right-radius: 20upx;
		padding:0 10upx;
		max-width:200upx;
		position: absolute;
		left:9upx;
		bottom:6upx;
		z-index: 9;
	}
	.absoteTitle text{
		height: 40upx;
		display: block;
		color: #fff;
		font-size: 24upx;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width:200upx;
		white-space: nowrap;
	}
	.absoteTitle text:before{
		content:"●";
		font-size: 16upx;
		color: #FFFFFF;
		margin-right: 6upx;
	}
</style>

